<template>
  <div v-if="headerData.length" :id="id">
    <el-table
        ref="elTable"
        v-loading="loading"
        :border="border"
        :data="tableData"
        :height="height"
        :max-height="maxHeight"
        :size="tableSize"
        :span-method="objectSpanMethod"
        :stripe="stripe"
        element-loading-spinner="el-icon-loading"
        element-loading-text="数据加载中"
        v-bind="$attrs"
        width="100%"
        @select="handleSelect"
        v-on="$listeners"
        @sort-change="handleSort"
        @select-all="handleSelectAll"
        @selection-change="handleSelectionChange"
    >
      <el-table-column
          v-if="selection"
          :fixed="headerOptions.fixed"
          :selectable="selectable"
          :width="headerOptions.width"
          align="left"
          type="selection"
      />
      <el-table-column
          v-if="index"
          :fixed="headerOptions.indexFixed"
          :width="headerOptions.indexWidth"
          align="left"
          label="编号"
          type="index"
      >
        <template v-slot="scope">
          <div class="text-center">
            {{ scope.$index + (currentPage - 1) * pageSize + 1 }}
          </div>
        </template>
      </el-table-column>
      <template v-for="column of headerData">
        <el-table-column
            v-if="column.children && column.children.length"
            :key="column.prop"
            :fixed="column.fixed"
            :header-align="column.align || 'left'"
            :label="column.label"
            :min-width="column.minWidth"

            v-bind="getColumnProps(column.columnProps)"
        >
          <el-table-column
              v-for="child of column.children"
              :key="child.prop"
              :align="child.align"
              :fixed="child.fixed"
              :formatter="child.formatter"
              :header-align="child.align || 'left'"
              :label="child.label"
              :min-width="child.minWidth"
              :prop="child.prop"
              :show-overflow-tooltip="child.overflow"
              :sortable="child.sortable"
              :width="child.width"
              v-bind="getColumnProps(child.columnProps)"
          >
            <template v-slot="scope">
              <table-content :config="child" :context="scope"/>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
            v-else
            :key="column.prop"
            :align="column.align"
            :fixed="column.fixed"
            :formatter="column.formatter"
            :header-align="column.align || 'left'"
            :label="column.label"
            :min-width="column.minWidth"
            :prop="column.prop"
            :render-header="(h, row)=>addRedStar(h, row, column)"
            :show-overflow-tooltip="column.overflow"
            :sortable="column.sortable"
            :width="column.width"
            v-bind="getColumnProps(column.columnProps)"
        >
          <template v-slot="scope">
            <table-content :config="column" :context="scope"/>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <Pagination
        v-if="showPagination"
        :current-page="currentPage"
        :page-size="pageSize"
        :single="single"
        :small="small"
        :total="total"
        v-bind="pageOptions"
        @changePage="handlePage"
        @showPages="handleSize"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index.js";
import TableContent from "./table-content";

export default {
  name: "YqTable",
  components: {
    TableContent,
    Pagination
  },
  props: {
    index: {
      default: true,
      type: Boolean
    },
    id: {
      default: "table-wrap",
      type: String
    },
    showPagination: {
      default: true,
      type: Boolean
    },
    showIndex: {
      default: true,
      type: Boolean
    },
    border: {
      default: false,
      type: Boolean
    },
    stripe: {
      default: false,
      type: Boolean
    },
    spanMethod: {
      default: false,
      type: Boolean
    },
    mergeRow: {
      default: false,
      type: Boolean
    },
    tableSize: {
      type: String,
      default: 'small'
    },
    pageOptions: {
      type: Object,
      default: () => {
      }
    },
    options: {
      type: Object,
      default: () => {
      }
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    mergeIndex: {
      type: Number,
      default: null
    },
    single: Boolean,
    small: Boolean,
    selection: Boolean,
    loading: Boolean,
    tableData: Array,
    total: Number,
    selectable: Function,
    height: [String, Number],
    maxHeight: [String, Number],
    headerData: Array,
    sys: {
      default: false,
      type: Boolean
    },
    rowCol: {
      default: false,
      type: Boolean
    }
  },
  computed: {
    headerOptions() {
      const baseOpts = {
        width: "60px",
        fixed: false,
        indexWidth: "60px",
        indexFixed: false
      };
      return Object.assign({}, baseOpts, this.options);
    }
  },
  methods: {
    // 给表头加必填符号*
    addRedStar(h, {column}, other) {
      if ( other.required ) {
        return [
          h("span", {style: "color: red"}, "*"),
          h("span", " " + column.label),
        ];
      } else {
        return [
          h("span", " " + column.label),
        ];
      }
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if ( this.spanMethod ) {
        if ( this.mergeRow ) {
          if ( columnIndex === this.mergeIndex ) {
            if ( rowIndex === 0 ) {
              return {
                rowspan: this.tableData.length - 1,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          } else {
            if ( rowIndex === this.tableData.length - 1 ) {
              if ( columnIndex === 0 ) {
                return {
                  rowspan: 1,
                  colspan: 1
                };
              } else if ( columnIndex === 1 ) {
                return {
                  rowspan: 1,
                  colspan: this.headerData.length - 1
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        } else {
          if ( columnIndex === this.mergeIndex ) {
            if ( rowIndex === 0 ) {
              return {
                rowspan: this.tableData.length,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
        }
      } else {
        if ( this.rowCol ) {
          this.spanArr = [];
          for ( var i = 0; i < this.tableData.length; i++ ) {
            if ( i === 0 ) {
              this.spanArr.push(1);
              this.pos = 0;
            } else {
              // 判断当前元素与上一个元素是否相同  inSameCode（批次字段）
              if (
                 this.tableData[i].inSameCode === this.tableData[i - 1].inSameCode
              ) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
          }
          if ( columnIndex === 0 || columnIndex === 1 ) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
              rowspan: _row,
              colspan: _col
            };
          }
        }
      }
    },
    getColumnProps(val) {
      if ( typeof val !== "object" ) return null;
      return val;
    },
    handleSort(column, prop, order) {
      this.$emit("table-sort", column, prop, order);
    },
    handleSelectionChange(val) {
      this.$emit("select-change", val);
    },
    handleSelectAll(val) {
      this.$emit("select-all", val);
    },
    handleSelect(val, row) {
      this.$emit("select", val, row);
    },
    handlePage(val) {
      this.$emit("now-page", val);
    },
    handleSize(val) {
      this.$emit("now-size", val);
    }
  }
};
</script>
